<template>
  <div class="wrapper">
    <div class="header-box">
      <header>
        <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
        <p>选择网格</p>
        <i class="fa fa-bars" @click="toFeedbackList"></i>
      </header>
      <div class="top-ban"></div>
      <img src="../assets/header.png" />
    </div>

    <table class="table-form">
      <tr>
        <td>所在省</td>
        <td>
          <select v-model="provinceId" @change="changeProvince">
            <option
              :value="province.provinceId"
              v-for="province in provinceArr"
              :key="province.provinceId"
            >
              {{ province.provinceName }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>所在市</td>
        <td>
          <select v-model="cityId">
            <option
              :value="city.cityId"
              v-for="city in cityArr"
              :key="city.cityId"
            >
              {{ city.cityName }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>地址</td>
        <td><input type="text" v-model="address" placeholder="具体地址" /></td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="btn" @click="next">下一步</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const axios = inject("axios");

const provinceArr = ref([]);
const cityArr = ref([]);
const provinceId = ref(0);
const cityId = ref(0);
const address = ref("");

const init = () => {
  axios
    .post("gridProvince/listGridProvinceAll")
    .then((response) => {
      provinceArr.value = response.data;
      provinceId.value = provinceArr.value[0].provinceId;
      listGridCityByProvinceId(provinceArr.value[0].provinceId);
    })
    .catch((error) => {
      console.log(error);
    });
};
init();

const listGridCityByProvinceId = (provinceId) => {
  axios
    .post("gridCity/listGridCityByProvinceId", {
      provinceId: provinceId,
    })
    .then((response) => {
      cityArr.value = response.data;
      cityId.value = cityArr.value[0].cityId;
    })
    .catch((error) => {
      console.log(error);
    });
};

const changeProvince = () => {
  listGridCityByProvinceId(provinceId.value);
};

const next = () => {
  if(address.value==''){
    alert('具体地址不能为空！');
    return;
  }
  router.push({
    path: "/selectAqi",
    query: {
      provinceId: provinceId.value,
      cityId: cityId.value,
      address: address.value,
    },
  });
};

const toFeedbackList = ()=>{
  router.push('/feedbackList');
}
</script>

<style>
</style>